<template>
	<view class="wrapper">
    <view class="detail">
      <view class="time">{{ detail.create_time }}</view>
      <view class="text">
        <u-parse :content="detail.inText" :tagStyle="style"></u-parse>
      </view>
      <view class="list">
        <view class="item" v-for="(item, index) in detail.inImages" :key="index">
          <u--image width="100%" height="100%" mode="widthFix" lazy-load :fade="true" duration="450" :src="baseUrl + item"></u--image>
        </view>
      </view>
      <view class="video" v-if="detail.url">
        <view class="video-control" v-if="!showVide" @click="showVide = !showVide">
          <u-icon name="play-right-fill" size="60" color="#ffffff"></u-icon>
        </view>
        <video
            v-show="showVide"
            :src="baseUrl + detail.url"
            controls></video>
      </view>
    </view>
    <u-back-top bottom="150" :scroll-top="scrollTop" icon="arrow-up" :customStyle="{'opacity': '0.88'}"></u-back-top>
  </view>
</template>

<script>
import base64 from '../../util/base64'
import config from '../../config/config'
import Service from '../../api/service'
const serviceModel = new Service()

	export default {
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
		data() {
			return {
        scrollTop: 0,
			  baseUrl: config.baseUrl,
        id: 0,
        detail: {},
        style: {
          p: 'color: #333;font-size:26rpx',
          span: 'font-size: 24rpx',
          lineHeight: '30rpx',
        },
        showVide: true
			}
		},
		onLoad(options) {
		  this.id = options.id
      this.fetch()
		},
		methods: {
		  fetch() {
        serviceModel.learnView({
          id: this.id
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          uni.setNavigationBarTitle({
            title: data.title
          })
          this.detail = data
          console.log(this.detail)
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
.wrapper {
  background: $background_color;
  padding: 20rpx;
  font-size: 24rpx;
  .detail {
    padding: 20rpx;
    border-radius: 10rpx;
    background: white;
    .time {
      height: 30px;
      color: #ccc;
    }
    .text {
      //background: red;
      margin: 10rpx 0;
    }
    .list {
      .item {
        //background: red;
        ::v-deep {
          .image {
            //width: 100%;
          }
        }
      }
    }
    .video {
      margin-top: 10px;
      video {
        width: 100%;
      }
    }
  }
}
</style>
